<template>
  <div>
    <div class="container">
      <ul class="flex m-0 newCenter">
        <li>首页 ></li>
        <li>煤炭知识 ></li>
      </ul>
      <div class="news">
        <!-- <div class="new_top" style="position: absolute;left: 48.5%;top:64%"></div> -->
        <h3>THE HOT Knowledge</h3>
        <h4>最新知识</h4>
      </div>
      <div class="flex formation justify-center align-end">
        <img src="../../assets/img/图层 0.png" alt />
        <div class="jmxc flex flex-column justify-center" @click="$router.push('./knowXq')">
          <h3>焦煤的形成</h3>
          <p>煤在焦炉炭化室内的成焦过程中，由于温度梯度和收缩应力的影响，整个焦饼被许多纵、横裂纹分割成大小不等的焦块，焦饼自焦炉推出后经历了一些自然坠落和相互碰撞过程，包括熄焦、运焦、筛焦，较大的焦炭沿着原始的粗大的裂纹碎裂成较小的焦块。这一破碎过程对现在室式炼焦工艺来说是不可避免的。</p>
          <div class="flex justify-end">
            <img src="../../assets/img/xz2.png" alt />
            <span>999人浏览</span>
            <img src="../../assets/img/xz3.png" alt />
            <span>2016-09-22</span>
          </div>
        </div>
      </div>
      <div class="news_bn">
        <!-- <div class="new_top" style="position: absolute;left: 48.5%;top:119%"></div> -->
        <h3>THE all Knowledge</h3>
        <h4>全部知识</h4>
      </div>
      <ul class="list_bn m-0 p-0" @click="$router.push('./knowXq')">
        <li class="flex flex-column align-center justify-center" v-for="(item,index) in mtList" :key="index">
          <img src="../../assets/img/图层 1.png" alt />
          <div>
            <i>{{item.title}}</i>
            <p>{{item.customurl}}</p>
            <div>
              <img src="../../assets/img/xz2.png" alt />
              <span>999人浏览</span>
              <img src="../../assets/img/xz3.png" alt />
              <span>{{item.issuetime}}</span>
            </div>
          </div>
        </li>
        <!-- <li class="flex flex-column align-center justify-center">
          <img src="../../assets/img/图层 2.png" alt />
          <div>
            <i>焦煤的形成</i>
            <p>煤在焦炉炭化室内的成焦过程中，由于温度梯度和收缩应力的影响，整个焦饼被许多纵、横裂纹分割成大小不等的焦块，焦饼自焦炉推出后经历了一些自然坠落和相互碰撞过程，包括熄焦、运焦、筛焦，较大的焦炭沿着原始的粗大的裂纹碎裂成较小的焦块。这一破碎过程对现在室式炼焦工艺来说是不可避免的。</p>
            <div>
              <img src="../../assets/img/xz2.png" alt />
              <span>999人浏览</span>
              <img src="../../assets/img/xz3.png" alt />
              <span>2016-09-22</span>
            </div>
          </div>
        </li>
        <li class="flex flex-column align-center justify-center">
          <img src="../../assets/img/图层 3.png" alt />
          <div>
            <i>焦煤的形成</i>
            <p>煤在焦炉炭化室内的成焦过程中，由于温度梯度和收缩应力的影响，整个焦饼被许多纵、横裂纹分割成大小不等的焦块，焦饼自焦炉推出后经历了一些自然坠落和相互碰撞过程，包括熄焦、运焦、筛焦，较大的焦炭沿着原始的粗大的裂纹碎裂成较小的焦块。这一破碎过程对现在室式炼焦工艺来说是不可避免的。</p>
            <div>
              <img src="../../assets/img/xz2.png" alt />
              <span>999人浏览</span>
              <img src="../../assets/img/xz3.png" alt />
              <span>2016-09-22</span>
            </div>
          </div>
        </li>
        <li class="flex flex-column align-center justify-center">
          <img src="../../assets/img/图层 4.png" alt />
          <div>
            <i>焦煤的形成</i>
            <p>煤在焦炉炭化室内的成焦过程中，由于温度梯度和收缩应力的影响，整个焦饼被许多纵、横裂纹分割成大小不等的焦块，焦饼自焦炉推出后经历了一些自然坠落和相互碰撞过程，包括熄焦、运焦、筛焦，较大的焦炭沿着原始的粗大的裂纹碎裂成较小的焦块。这一破碎过程对现在室式炼焦工艺来说是不可避免的。</p>
            <div>
              <img src="../../assets/img/xz2.png" alt />
              <span>999人浏览</span>
              <img src="../../assets/img/xz3.png" alt />
              <span>2016-09-22</span>
            </div>
          </div>
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      mtList:[]
    };
  },
  mounted() {
    this.getMt()
  },
  methods: {
    getMt() {
      this.$api
        .searchMt({})
        .then((res) => {
          this.mtList = res.data.list
        })
        .catch(() => {});
    },
  },
  components: {},
};
</script>

<style lang="stylus" scoped>
.container {
  width: 1200px;
  height: 2031px;
  background: #FFFFFF;
  margin-bottom: 50px;
  box-shadow: 0px 14px 46px 0px rgba(0, 0, 0, 0.05), 0px 14px 46px 0px rgba(0, 0, 0, 0.05);
}

.newCenter {
  li {
    margin-top: 30px;
    font-size: 14px;
    margin-right: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }
}

.news {
  margin-top: 80px;
  text-align: center;
  height: 200px;

  h3 {
    font-size: 32px;
    color: #333333;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
    margin-top: -20px;
  }
}

.formation {
  .jmxc {
    width: 499px;
    height: 313px;
    border: 1px solid #CECECE;
    background: #F5F5F5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;

    h3 {
      font-size: 38px;
      font-weight: 500;
      color: #333333;
      line-height: 5px;
      margin-left: 40px;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      margin-left: 40px;
    }

    div {
      margin-right: 10px;

      img {
        width: 14px;
        height: 10px;
        margin-top: 4px;
        margin-right: 5px;
      }

      span {
        font-size: 12px;
        color: #515151;
        margin-right: 5px;
      }
    }
  }
}

.news_bn {
  margin-top: 100px;
  text-align: center;
  height: 200px;

  h3 {
    font-size: 32px;
    color: #333333;
  }

  h4 {
    font-size: 24px;
    font-weight: 400;
    color: #0B0B0C;
    margin-top: -20px;
  }
}

.list_bn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;

  li {
    list-style: none;
    width: 420px;
    height: 460px;
    background: #FFFFFF;
    box-shadow: 0px 0px 16px 0px rgba(14, 5, 10, 0.16);
    float: left;
    margin-left: 120px;
    margin-bottom: 30px;

    i {
      font-style: normal;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
    }

    p {
      font-size: 18px;
      color: #666666;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      width: 319px;
    }

    div {
      margin-right: 10px;

      img {
        width: 14px;
        height: 10px;
        margin-top: 4px;
        margin-right: 5px;
      }

      span {
        font-size: 12px;
        color: #515151;
        margin-right: 5px;
      }
    }
  }
}
</style>